import React, { Component } from 'react'
import { Form, Input, Button,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.less'
import logo from '../../assets/images/logo.png'
import { reqLogin } from '../../api'
import memoryUtils from '../../utils/memoryUtils';
import storageUtils from '../../utils/storageUtils';
import { Redirect } from 'react-router-dom';

export default class Login extends Component {
  render() {
    // 判断用户是否登录，如果登录，自动跳转到管理界面
    const user = memoryUtils.user
    if (user && user.id) {
      return <Redirect to='/'/>
    }
    const onFinish = async (values) => {
      // 提交ajax 请求
      const {username, password} = values
      const { data: res } = await reqLogin(username, password)
      if (res.meta.status === 200) {
        message.success('登录成功')
        // 保存user 到 本地内存中
        const user = res.data
        memoryUtils.user = user 
        // 保存user 到 localStorage中
        storageUtils.saveUser(user)
        // 此处为了解决后台服务缺少问题。（用的vue项目的后台服务，需要存储token）
        localStorage.setItem('token', res.data.token)
        // 跳转到主页
        this.props.history.replace('/')
      }else {
        message.error('登录失败')
      }
    };
    const onFinishFailed = (errorInfo) => {
      message.error('失败啦')
      console.log('提交失败:'+errorInfo);
    }
    return (
      <div className='login'>
        <header className='login_header'>
          <img src={logo}></img>
          <h1>React项目：后台管理系统</h1>
        </header>
        <section className='login_content'>
          <h2>用户登录</h2>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={
              {
                'username': 'admin',
                'password': '123456'
              }
            }
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  whitespace:true,
                  message: '用户名不能为空',
                },
                {
                  min: 4,
                  message: '用户名最少4位',
                },
                {
                  max: 12,
                  message: '用户名最大12位',
                },
                {
                  pattern: /^[a-zA-Z0-9]+$/,
                  message: '用户名必须是英文、数字或下划线组成',
                },
              ]
            }
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请输入密码"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    )
  
}
}

/**
 * 1、综合表单验证
 * 2、收集表单输入数据
 */


/**
 * async 和 await
 * 1、作用是什么
 *    简化Promise 不用使用then() 来指定成功或失败的回调函数
 *    以同步编码（没有回调函数了）方式实现异步编程
 * 2、哪里写await?
 *    在返回Promise的表达式左侧写await:不想要promise,想要promise异步执行的成功的value数据
 * 3、哪里写async
 *    await所在函数(最近的)定义的左侧写async
 */